<template>
  <div class="box">
    <!-- 标题 -->
    <div class="title">
      <div class="title_fan">
        <span class="el-icon-arrow-left" @click="$router.go(-1)"></span>
      </div>
      <!-- 图片信息 -->
      <div class="title_cen">
        <div class="card_title">
          <img src="../../../../assets/static/recharge/q4.png" alt=""/>
          <div>对方账户</div>
        </div>
        <!--  -->
        <div class="account">
          <!--          <input v-model="form.user_id">-->
          <el-select @change="getuserid" v-model="mobile" clearable>
            <el-option v-for="item in selectOption" :key="item.ROW_NUMBER" :value="item.udata.mobile"
                       :label="item.udata.nickname">
              {{ item.udata.nickname }}
            </el-option>
          </el-select>
          <img src="../../../../assets/static/addReceiverAccount/a2.png" alt="">
        </div>
        <!--  -->
        <div class="money">金额：
          <input v-model="form.money"/>
        </div>
        <!--  -->
        <div class="title_input">
          <div class="card_title">
            <img src="../../../../assets/static/recharge/q4.png" alt=""/>
            <div>说明</div>
          </div>
        </div>
        <el-input
          type="textarea"
          placeholder="请输入文本"
          maxlength="200"
          show-word-limit
          v-model="form.remark"
          :autosize="{ minRows: 3, maxRows: 8}"
        >
        </el-input>
      </div>
    </div>
    <!--  -->
    <div @click="add" class="ensure">确定</div>
  </div>
</template>

<script>
import {add, transferfriend, getuserid} from '@/api/merbership/transfer'

export default {
  data() {
    return {
      form: {
        user_id: '',
        money: '',
        type: '',
        user_bank_id: '',
        remark: '',
      },
      mobile: '',
      uid: '',
      selectOption: [
        {
          'user_id': '3',
          'ROW_NUMBER': '1',
          'udata': {
            'id': '3',
            'head': '',
            'nickname': 'xczcz',
            'grade_id': '1',
            'mobile': '15555555555',
            'balance': '10.00',
            'score': '0',
            'status': '1',
            'create_time': '1635327576',
            'email': '',
            'address': '',
            'ROW_NUMBER': '1'
          }
        }]
    }
  },
  mounted() {
    // this.transferfriend()
  },
  methods: {
    // ------------------ axios ---------------------
    /**
     * 根据手机号查询uid
     */
    getuserid() {
      const pd = {
        mobile: this.mobile
      }
      getuserid(this.$qs.stringify(pd))
        .then(res => {
          this.form.user_id = res.data.data
          // this.add()
        })
    },
    /**
     * 添加对方账户信息
     */
    add() {
      add(this.$qs.stringify(this.form))
        .then(res => {
          this.$message.success(res.data.msg)
        })
    },
    /**
     * 转账好友
     */
    transferfriend() {
      const pd = {}
      transferfriend(this.$qs.stringify(pd))
        .then(res => {
          // this.$message.success(res.data.msg)
          this.selectOption = res.data.data.data
        })
    }
  }
}
</script>
<style>
.el-select .el-input.is-focus .el-input__inner {
  border-color: transparent;
}

.el-select .el-input .el-select__caret {
  display: none;
}

.el-input__inner {
  appearance: none;
  width: 240px;
  border-color: transparent;
  outline: none;
  box-shadow: transparent;
}

.el-select:hover .el-input__inner {
  border-color: transparent;
  outline: none;
}

.el-select:focus .el-input__inner {
  border-color: transparent;
  outline: none;
}
</style>
<style scoped>
input {
  outline: none;
  border-color: transparent;
}

.box {
  background-color: #F5F5F5;
  height: 100vh;
}

/* 标题 */
.title {
  background-image: linear-gradient(to bottom, #7ac91b 65%, #f5f5f5 0);
  font-weight: bold;
}

.title .title_fan {
  color: #fff;
  font-size: 14px;
  padding: 15px;
}

.title_cen {
  margin: 0 5%;
  padding: 15px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 5px 5px 5px #ccc;
  color: #333333;
}

/* card 标题 */
.card_title {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
}

.card_title div {
  margin-left: 13px;
}

/* 对方账户 */
.account {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px 0 12px;
  box-shadow: 0 1px 5px #ccc;
  border-radius: 10px;
  margin: 10px 0;
  color: #66C107;
  font-size: 12px;
}

.account img {
  width: 13px;
}

/*  骂你 */
.money {
  font-size: 14px;
  font-weight: bold;
}

.money > span {
  font-weight: normal;
  color: #6AC30C;
}

.title_input {
  margin: 10px 0;
}

/*  */
.ensure {
  margin: 55px;
  background-image: linear-gradient(to right, #FED000, #FFB200);
  text-align: center;
  padding: 15px;
  color: #fff;
  border-radius: 10px;
}
</style>
